<template>
    <div class="time-picker-overlay" @click.self="handleClose">
        <div class="time-picker-container">
            <div class="time-picker-header">
                <span class="title">选择时间范围</span>
                <el-button type="text" size="small" @click="handleClose">关闭</el-button>
            </div>
            <div class="demo-date-picker">
                <div class="block">
                    <span class="demonstration">Default</span>
                    <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                        end-placeholder="结束日期" @change="handleDateChange" />
                </div>
            </div>
            <div class="time-picker-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="handleConfirm">确定</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from 'vue'

const value1 = ref('')

// 定义事件
const emit = defineEmits(['close', 'data-selected'])


// 处理关闭事件
const handleClose = () => {
    emit('close')
}

// 处理日期变化
const handleDateChange = () => {
    // 可以在这里添加日期变化时的逻辑
}

// 处理确认按钮点击
const handleConfirm = () => {
    // 传递选择的日期范围
    emit('data-selected', {
        value1: value1.value
    })
    handleClose()
}
</script>

<style scoped>
.time-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.time-picker-container {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    width: 80%;
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
}

.time-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
}

.time-picker-header .title {
    font-size: 18px;
    font-weight: 500;
}

.time-picker-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid #eaeaea;
}

.time-picker-footer .el-button {
    margin-left: 10px;
}

/* 保留原有的样式 */
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 1.5rem 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 1rem;
}

@media screen and (max-width: 1200px) {
    .demo-date-picker .block {
        flex: 0 0 100%;
        padding: 1rem 0;
        min-width: auto;
        border-right: none;
        border-bottom: solid 1px var(--el-border-color);
    }

    .demo-date-picker .block:last-child {
        border-bottom: none;
    }
}
</style>